<template>
    <div class="two">
        <h3>根组件2</h3>
        <p>从 vue X 中获取值:{{ count  }}</p>
                <button @click="this.delCount">值 - 1</button>
                <button @click="changeCountAction(888)">1秒后改为888</button>
                <hr>
                <div> {{ filterList }} </div>
               <!-- 如果没有配置辅助函数 可以 使用{{$store.getters.filterList }}-->
    </div>
</template>
<style>
.two{
    width: 300px;
    height: 200px;border:1px solid rgb(108, 107, 105);
    text-align: center;
    margin-left: 20px;
}
</style>
<script>
import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';

export default {
       
    methods :{
         ...mapMutations(['delCount']),
         ...mapActions (['changeCountAction']),
        handleDel(){
            /* 没有使用mapMutations 时的调用 */
            /* this.$store.commit('delCount') */
            //使用mapMutations 时 的调用
            this.delCount()
        },
        
    },
    computed:{
        ...mapState(['count','title']),
        ...mapGetters(['filterList'])
    }
}
</script>